<template>
  <el-row>
    <el-col :span="8"></el-col>
    <el-col :span="4"><el-button type="primary">删除</el-button></el-col>
    <el-col :span="2"><el-button type="primary">转发</el-button></el-col>
    <el-col :span="10"></el-col>
  </el-row>

  <el-row>
    <el-col :span="8"></el-col>
    <el-col :span="4">
      <el-checkbox v-model="checked1" label="" size="small" />
      <label>发件人</label>
<!--      <el-checkbox v-model="checked2" label="Option 1" size="large" />-->
    </el-col>
    <el-col :span="2">
      <label>主题</label>
    </el-col>
    <el-col :span="10"></el-col>
  </el-row>
  <br>

  <div v-for="mail in mails">
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="4">
        <el-checkbox size="small" />
        <label>{{mail.sender}}</label>

      </el-col>
      <el-col :span="8">
        <label>{{mail.content}}</label>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <br>
  </div>



  <el-row>
    <el-col :span="8"></el-col>
    <el-col :span="4"><el-button type="primary">删除</el-button></el-col>
    <el-col :span="2"><el-button type="primary">转发</el-button></el-col>
    <el-col :span="10"></el-col>
  </el-row>
</template>

<script>
export default {
  name: "ReceiveEmail",
  data(){
    return {
      mails: [
        {
          sender: "Microsoft Surface",
          content: "全新的Surface Laptop Go 2 闪亮登场（广告）"
        },
        {
          sender: "GitHub",
          content: "[GitHub]A personal access token has"
        }
      ],
    }
  }
}
</script>

<script setup>
  import { ref } from 'vue'
  const checked1 = ref(false)
  const checked2 = ref(false);
</script>

<style scoped>

</style>
